<template>
	<view class="container">
		<view class="left">
			<view v-for="(item,index) in listDataL" :key="item" @click="Change(index)"
				:class="current==index ? 'list-l-active' : 'list-l' ">{{item.name}}</view>
		</view>
		<view class="right">
			<!-- 热门分类 -->
			<view class="list-r" v-if="current==0">
				<uni-grid :column="3" :showBorder="false">
					<uni-grid-item v-for="(item,i) in freshFlowers" :key="i">
						<image class="img" :src="item.tp" mode="" @click="Godetails(item.bh)"></image>
						<text class="text" @click="Godetails(item.bh)">{{item.name}}</text>
					</uni-grid-item>
				</uni-grid>
			</view>
			<!-- 鲜花 -->
			<view class="list-r" v-else-if="current==1">
				<uni-grid :column="3" :showBorder="false">
					<uni-grid-item v-for="(item,i) in freshFlowers1" :key="i">
						<image class="img" :src="item.tp" mode="" @click="Godetails(item.bh)"></image>
						<text class="text" @click="Godetails(item.bh)">{{item.name}}</text>
					</uni-grid-item>
				</uni-grid>
			</view>
			<!-- 永生花 -->
			<view class="list-r" v-else-if="current==2">
				<uni-grid :column="3" :showBorder="false">
					<uni-grid-item v-for="(item,i) in freshFlowers2" :key="i">
						<image class="img" :src="item.tp" mode="" @click="Godetails(item.bh)"></image>
						<text class="text" @click="Godetails(item.bh)">{{item.name}}</text>
					</uni-grid-item>
				</uni-grid>
			</view>
			<!-- 蛋糕 -->
			<view class="list-r" v-else-if="current==3">
				<uni-grid :column="3" :showBorder="false">
					<uni-grid-item v-for="(item,i) in freshFlowers3" :key="i">
						<image class="img" :src="item.tp" mode="" @click="Godetails(item.bh)"></image>
						<text class="text" @click="Godetails(item.bh)">{{item.name}}</text>
					</uni-grid-item>
				</uni-grid>
			</view>
			<!-- 特色礼盒 -->
			<view class="list-r" v-else-if="current==4">
				<uni-grid :column="3" :showBorder="false">
					<uni-grid-item v-for="(item,i) in freshFlowers4" :key="i">
						<image class="img" :src="item.tp" mode="" @click="Godetails(item.bh)"></image>
						<text class="text" @click="Godetails(item.bh)">{{item.name}}</text>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listDataL: [],
				current: 0,
				freshFlowers: [],
				freshFlowers1: [],
				freshFlowers2: [],
				freshFlowers3: [],
				freshFlowers4: [],
				ListI: 0

			}
		},
		onShow() {
			this.listDataL = []
			this.freshFlowers = []
			this.GetfreshFlowerData()
		},
		methods: {
			GetfreshFlowerData() {
				this.requestfs({
					url: '/mall/type/mallList'
				}).then(res => {

					if (res.data.msg == "success") {
						var freshFlower = res.data.data

						for (var i = 0; i < freshFlower.length; i++) {
							this.listDataL.push(freshFlower[i])
							this.ListI = i

							for (var j = 0; j < freshFlower[i].children.length; j++) {

								if (i == this.ListI) {

									this.ListI = this.ListI + 1
									if (i == 0) {
										this.freshFlowers = freshFlower[0].children
									} else if (i == 1) {
										this.freshFlowers1 = freshFlower[1].children
									} else if (i == 2) {
										this.freshFlowers2 = freshFlower[2].children
									} else if (i == 3) {
										this.freshFlowers3 = freshFlower[3].children
									} else if (i == 4) {
										this.freshFlowers4 = freshFlower[4].children
									}
								}
							}
						}
					}
				})
			},
			Change(index) {
				this.current = index
			},
			Godetails(bh) {
				//通过列表返回的数据点击时传入下一个页面进行请求数据
				uni.navigateTo({
					url: '/pages-classify/productsList/productsList?bh='+bh
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		width: 735rpx;

		.left {
			width: 30%;
			border-right: 1px solid #e9ecef;
			position: fixed;
			left: 0;
			top: 0;
			min-height: 100vh;
			height: auto;
			text-align: center;

			.list-l {
				line-height: 120rpx;
			}

			.list-l-active {
				margin: 20rpx 0;
				line-height: 80rpx;
				border-left: 2px solid #ef5e25;
				color: #ef5e25;
			}
		}

		.right {
			width: 69%;
			position: fixed;
			right: 0;
			top: 0;
			color: #565656;

			.list-r {
				width: 100%;
				text-align: center;
				height: 96vh;
				overflow-y: scroll;

				.img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50rpx;
					margin: auto;
				}

				.text {
					margin-top: -30rpx;
				}
			}
		}
	}
</style>
